<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>English Potential Assessment - Native Language</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        background-color: #fff;
        color: #333;
      }

      .dark body {
        background-color: #1a1a1a;
        color: #f5f5f5;
      }

      /* Progress Bar Styles */
      .progress-container {
        height: 4px;
        width: 100%;
        background-color: #f0f0f0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
      }

      .progress-bar {
        height: 100%;
        background-color: #007aff;
        width: 25%; /* 8 steps, step 2 */
      }

      .dark .progress-container {
        background-color: #333;
      }

      /* Top Navigation */
      .top-nav {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .back-btn {
        color: #007aff;
        font-size: 1.25rem;
        cursor: pointer;
      }

      /* Content Area */
      .content {
        max-width: 500px;
        margin: 0 auto;
        padding: 1rem;
        min-height: calc(100vh - 60px); /* 减去顶部导航的高度 */
        display: flex;
        flex-direction: column;
      }

      .main-content {
        flex-grow: 1;
      }

      .bottom-button {
        margin-top: auto;
        padding-bottom: 2rem;
      }

      /* Option Card Styles */
      .option-card {
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        margin-bottom: 1rem;
        cursor: pointer;
        transition: all 0.2s;
      }

      .option-card:hover,
      .option-card.selected {
        border-color: #007aff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      }

      .option-card.selected {
        background-color: rgba(0, 122, 255, 0.1);
      }

      .option-title {
        font-weight: 600;
      }

      .option-subtitle {
        color: #6b7280;
        font-size: 0.875rem;
      }

      .option-check {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Button Styles */
      .btn-primary {
        background-color: #007aff;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        border: none;
      }

      .btn-primary:hover {
        background-color: #0062cc;
      }

      .btn-primary:disabled {
        background-color: #c7c7cc;
        cursor: not-allowed;
      }

      /* Dark Mode Adaptation */
      .dark .option-card {
        border-color: #4a5568;
        background-color: #2d3748;
      }

      .dark .option-card:hover,
      .dark .option-card.selected {
        border-color: #0a84ff;
      }

      .dark .option-card.selected {
        background-color: rgba(10, 132, 255, 0.2);
      }

      .dark .option-subtitle {
        color: #9ca3af;
      }

      /* Theme Toggle Button */
      .theme-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #007aff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
      }

      .theme-toggle:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      }

      .language-select {
        width: 100%;
        padding: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background-color: white;
        cursor: pointer;
        font-size: 1rem;
        appearance: none;
        position: relative;
        margin-bottom: 2rem;
      }

      .language-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
      }

      .language-option img {
        width: 24px;
        height: 16px;
      }

      .select-wrapper {
        position: relative;
        width: 100%;
      }

      .select-button {
        width: 100%;
        padding: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background-color: white;
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        transition: border-color 0.2s;
      }

      .select-button:hover {
        border-color: #007aff;
      }

      .select-button .placeholder {
        color: #9ca3af;
      }

      .select-button .arrow {
        color: #9ca3af;
        transition: transform 0.2s;
      }

      .select-button.active .arrow {
        transform: rotate(180deg);
      }

      .dropdown-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      .dropdown-menu.show {
        display: block;
      }

      .dropdown-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: background-color 0.2s;
      }

      .dropdown-item:hover {
        background-color: #f3f4f6;
      }

      .dropdown-item.selected {
        background-color: #f0f7ff;
        color: #007aff;
      }

      .dark .select-button {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #f5f5f5;
      }

      .dark .select-button:hover {
        border-color: #0a84ff;
      }

      .dark .dropdown-menu {
        background-color: #2d3748;
        border-color: #4a5568;
      }

      .dark .dropdown-item:hover {
        background-color: #4a5568;
      }

      .dark .dropdown-item.selected {
        background-color: rgba(10, 132, 255, 0.2);
      }

      /* 自定义滚动条样式 */
      .dropdown-menu::-webkit-scrollbar {
        width: 6px;
      }

      .dropdown-menu::-webkit-scrollbar-track {
        background: transparent;
      }

      .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: #cbd5e0;
        border-radius: 3px;
      }

      .dark .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: #4a5568;
      }

      .nav-progress-container {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        gap: 15px;
      }

      .back-button {
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        cursor: pointer;
        color: #2b85e4;
        font-size: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .back-button svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }

      .progress-bar {
        flex: 1;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
      }

      .progress {
        height: 100%;
        width: 6.66%;
        background-color: #2b85e4;
        border-radius: 3px;
      }
    </style>
    <script type="module">
      import translations from './translations.js'

      const languageData = [
        { code: 'es', name: 'Español', flag: '🇪🇸' },
        { code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
        { code: 'zh', name: '中文', flag: '🇨🇳' },
        { code: 'pt', name: 'Português', flag: '🇵🇹' },
        { code: 'fr', name: 'Français', flag: '🇫🇷' },
        { code: 'en', name: 'English', flag: '🇬🇧' },
        { code: 'hi', name: 'हिंदी', flag: '🇮🇳' },
        { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
        { code: 'it', name: 'Italiano', flag: '🇮🇹' },
        { code: 'uk', name: 'Українська', flag: '🇺🇦' },
        { code: 'ru', name: 'Русский', flag: '🇷🇺' },
        { code: 'ja', name: '日本語', flag: '🇯🇵' },
        { code: 'ko', name: '한국어', flag: '🇰🇷' },
        { code: 'ar', name: 'العربية', flag: '🇸🇦' },
        { code: 'bn', name: 'বাংলা', flag: '🇧🇩' },
        { code: 'ur', name: 'اردو', flag: '🇵🇰' },
        { code: 'fa', name: 'فارسی', flag: '🇮🇷' },
        { code: 'th', name: 'ไทย', flag: '🇹🇭' },
        { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
        { code: 'id', name: 'Bahasa Indonesia', flag: '🇮🇩' },
        { code: 'ms', name: 'Bahasa Melayu', flag: '🇲🇾' },
        { code: 'fil', name: 'Filipino', flag: '🇵🇭' },
        { code: 'sw', name: 'Kiswahili', flag: '🇰🇪' },
        { code: 'am', name: 'አማርኛ', flag: '🇪🇹' },
        { code: 'el', name: 'Ελληνικά', flag: '🇬🇷' },
        { code: 'nl', name: 'Nederlands', flag: '🇳🇱' },
        { code: 'da', name: 'Dansk', flag: '🇩🇰' },
        { code: 'sv', name: 'Svenska', flag: '🇸🇪' },
        { code: 'no', name: 'Norsk', flag: '🇳🇴' },
        { code: 'fi', name: 'Suomi', flag: '🇫🇮' },
        { code: 'is', name: 'Íslenska', flag: '🇮🇸' },
        { code: 'hu', name: 'Magyar', flag: '🇭🇺' },
        { code: 'pl', name: 'Polski', flag: '🇵🇱' },
        { code: 'cs', name: 'Čeština', flag: '🇨🇿' },
        { code: 'sl', name: 'Slovenščina', flag: '🇸🇮' },
        { code: 'sk', name: 'Slovenčina', flag: '🇸🇰' },
        { code: 'hr', name: 'Hrvatski', flag: '🇭🇷' },
        { code: 'bg', name: 'Български', flag: '🇧🇬' },
        { code: 'ro', name: 'Română', flag: '🇷🇴' },
        { code: 'sr', name: 'Српски', flag: '🇷🇸' },
        { code: 'mk', name: 'Македонски', flag: '🇲🇰' },
        { code: 'sq', name: 'Shqip', flag: '🇦🇱' },
        { code: 'he', name: 'עברית', flag: '🇮🇱' },
        { code: 'ta', name: 'தமிழ்', flag: '🇮🇳' },
      ]

      // 初始化下拉菜单
      function initializeDropdown() {
        const dropdownMenu = document.getElementById('dropdownMenu')
        const selectButton = document.getElementById('selectButton')
        const nextButton = document.getElementById('next-button')

        // 创建下拉选项
        languageData.forEach(lang => {
          const item = document.createElement('div')
          item.className = 'dropdown-item'
          item.innerHTML = `${lang.flag} ${lang.name}`
          item.dataset.code = lang.code

          item.addEventListener('click', () => {
            selectLanguage(lang)
            toggleDropdown()
          })

          dropdownMenu.appendChild(item)
        })

        // 点击按钮切换下拉菜单
        selectButton.addEventListener('click', toggleDropdown)

        // 点击外部关闭下拉菜单
        document.addEventListener('click', e => {
          if (!selectButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
            dropdownMenu.classList.remove('show')
            selectButton.classList.remove('active')
          }
        })

        // 初始化时禁用按钮
        nextButton.disabled = true
        nextButton.style.backgroundColor = '#B1D9FF'
      }

      // 切换下拉菜单显示/隐藏
      function toggleDropdown() {
        const dropdownMenu = document.getElementById('dropdownMenu')
        const selectButton = document.getElementById('selectButton')
        dropdownMenu.classList.toggle('show')
        selectButton.classList.toggle('active')
      }

      // 选择语言
      function selectLanguage(lang) {
        const selectButton = document.getElementById('selectButton')
        const dropdownItems = document.querySelectorAll('.dropdown-item')
        const nextButton = document.getElementById('next-button')

        // 更新按钮文本
        selectButton.innerHTML = `${lang.flag} ${lang.name} <i class="arrow fas fa-chevron-down"></i>`
        selectButton.classList.remove('placeholder')

        // 更新选中状态
        dropdownItems.forEach(item => {
          item.classList.toggle('selected', item.dataset.code === lang.code)
        })

        // 获取页面标题和当前页面名称
        const pageTitle = document.querySelector('.text-3xl').textContent.trim()
        const pageName = window.location.pathname.split('/').pop().split('.')[0]

        // 创建数据对象
        const data = {
          title: pageTitle,
          value: `${lang.flag} ${lang.name}`,
          code: lang.code,
        }

        // 以JSON格式存储到localStorage
        localStorage.setItem(pageName, JSON.stringify(data))

        // 保存语言选择（保留原有的存储方式，以保证兼容性）
        localStorage.setItem('selectedLanguage', lang.name)
        localStorage.setItem('selectedLanguageCode', lang.code)
        localStorage.setItem('selectedLanguageFlag', lang.flag)

        // 更新翻译
        if (translations[lang.name]) {
          const trans = translations[lang.name]
          document.getElementById('titleText').textContent = trans.title
          document.getElementById('continueText').textContent = trans.continue
        }

        // 启用继续按钮
        nextButton.disabled = false
        nextButton.style.backgroundColor = '#007aff'
      }

      // 检查暗色模式
      function checkDarkMode() {
        if (
          localStorage.getItem('darkMode') === 'true' ||
          (localStorage.getItem('darkMode') === null && window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
          document.documentElement.classList.add('dark')
          return true
        }
        return false
      }

      // 切换暗色/亮色模式
      window.toggleDarkMode = function () {
        if (document.documentElement.classList.contains('dark')) {
          document.documentElement.classList.remove('dark')
          localStorage.setItem('darkMode', 'false')
          document.getElementById('theme-icon').className = 'fas fa-moon'
        } else {
          document.documentElement.classList.add('dark')
          localStorage.setItem('darkMode', 'true')
          document.getElementById('theme-icon').className = 'fas fa-sun'
        }
      }

      // 当DOM加载完成
      document.addEventListener('DOMContentLoaded', function () {
        initializeDropdown()
        const isDark = checkDarkMode()
        document.getElementById('theme-icon').className = isDark ? 'fas fa-sun' : 'fas fa-moon'

        // 恢复之前选择的语言
        const savedLanguage = localStorage.getItem('selectedLanguage')
        if (savedLanguage) {
          const lang = languageData.find(l => l.name === savedLanguage)
          if (lang) {
            selectLanguage(lang)
          }
        }
      })
    </script>
  </head>
  <body>
    <!-- Main Content Area -->
    <div class="content">
      <div class="nav-progress-container">
        <button class="back-button" onclick="window.location.href='/index.html'">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
          </svg>
        </button>
        <div class="progress-bar">
          <div class="progress"></div>
        </div>
      </div>
      <div class="main-content">
        <div class="flex justify-center">
          <h1 class="text-3xl text-[#0B4983] w-80 text-center font-bold mb-6" id="titleText">
            What is your native language?
          </h1>
        </div>

        <div class="select-wrapper">
          <div id="selectButton" class="select-button">
            <span class="placeholder">Choose an option</span>
            <i class="arrow fas fa-chevron-down"></i>
          </div>
          <div id="dropdownMenu" class="dropdown-menu">
            <!-- Options will be inserted here by JavaScript -->
          </div>
        </div>
      </div>

      <div class="bottom-button">
        <button id="next-button" disabled class="btn-primary" onclick="window.location.href='/whatIsLevel.html'">
          <span id="continueText">Continue</span> <i class="fas fa-arrow-right ml-2"></i>
        </button>
      </div>
    </div>

    <!-- Theme Toggle Button -->
    <div class="theme-toggle" onclick="toggleDarkMode()">
      <i id="theme-icon" class="fas fa-moon"></i>
    </div>
  </body>
</html>
